<{include file="v2/header.html"}>
<main class="pt-24 pb-16 bg-paper">
    <section class="container mx-auto px-4">
        <div class="scroll-reveal">
            <h1 class="text-[clamp(1.8rem,4vw,2.8rem)] font-song font-bold mb-2">声景体验</h1>
            <p class="text-lightink max-w-2xl mb-8">聆听诗词中的意境之声，感受"诗中有画，画中有声"的境界</p>
        </div>
        
        <div class="bg-ink/5 rounded-2xl p-6 md:p-8">
            <div class="mb-8">
                <label class="block text-ink font-medium mb-3">选择诗词</label>
                <select id="poemSelect" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-cinnabar">
                    <option value="">-- 请选择一首诗词 --</option>
                    <!-- 后端会动态填充诗词列表 -->
                </select>
            </div>
            
            <div id="audioPlayer" class="hidden mb-8">
                <div class="bg-ink/10 p-6 rounded-xl">
                    <h3 id="poemTitle" class="text-xl font-song font-bold mb-4"></h3>
                    <div class="flex items-center mb-4">
                        <audio id="audioElement" controls class="w-full"></audio>
                    </div>
                    <div class="text-sm text-lightink">
                        <p id="poemContent"></p>
                    </div>
                </div>
            </div>
            
            <div class="mt-6">
                <button id="generateAudio" class="bg-cinnabar text-rice px-6 py-3 rounded-lg hover:bg-opacity-90 transition-colors">
                    生成声景
                </button>
            </div>
        </div>
    </section>
</main>
<{include file="v2/footer.html"}>

<script>
// 诗词选择逻辑
document.getElementById('poemSelect').addEventListener('change', function() {
    const poemId = this.value;
    if (poemId) {
        // 加载诗词内容
        fetch('/index.php?c=main&a=getPoemDetail&id=' + poemId)
            .then(response => response.json())
            .then(data => {
                if (data.code === 1) {
                    document.getElementById('poemTitle').textContent = data.data.title;
                    document.getElementById('poemContent').textContent = data.data.content;
                    document.getElementById('audioPlayer').classList.remove('hidden');
                }
            });
    }
});

// 生成音频逻辑
document.getElementById('generateAudio').addEventListener('click', function() {
    const poemId = document.getElementById('poemSelect').value;
    if (!poemId) {
        alert('请先选择一首诗词');
        return;
    }
    
    this.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 生成中...';
    this.disabled = true;
    
    fetch('/index.php?c=main&a=createAudioSubmit&id=' + poemId)
        .then(response => response.json())
        .then(data => {
            if (data.code === 1) {
                document.getElementById('audioElement').src = data.data;
                document.getElementById('audioElement').load();
            } else {
                alert(data.msg);
            }
            this.innerHTML = '生成声景';
            this.disabled = false;
        });
});

// 页面加载时获取诗词列表
window.onload = function() {
    fetch('/index.php?c=main&a=getPoemList')
        .then(response => response.json())
        .then(data => {
            if (data.code === 1) {
                const select = document.getElementById('poemSelect');
                data.data.list.forEach(poem => {
                    const option = document.createElement('option');
                    option.value = poem.id;
                    option.textContent = poem.title + ' - ' + poem.author;
                    select.appendChild(option);
                });
            }
        });
};
</script>